<template>
  <view class="box">
    <view class="top heads fixed" :style="'padding-top:' + statusBarHeight1 + 'px;' + paddingR">
      <view class="item" style="height: 88rpx;">
        <view class="" style="width: 123rpx">
          <image
            class="backs"
            src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
            @click="fanhui"
          />
        </view>
        <view class="toptitles"> 举报 </view>
        <view class="remove" @click="bianji"> 举报记录 </view>
      </view>
    </view>
    <view class="top tou" :style="'padding-top:' + statusBarHeight1 + 'px'"> </view>
    <scroll-view
      scroll-y="true"
      class="list"
      :style="'height: calc(100vh - ' + (statusBarHeight1 + 65) + 'px );'"
    >
      <view class="tips">
        您的举报将会在5个工作日之内处理，核实后会以系统通知的方式告知您举报结果。
      </view>
      <view class="leixin" v-if="index == 1">
        <view class="name"> <span style="color: red">*</span>请选择举报类型（必选,可多选） </view>
        <checkbox-group class="radioList" v-model="xuan" @change="changeType">
          <label class="radio"> <checkbox value="职位虚假" />职位虚假 </label>
          <label class="radio"> <checkbox value="薪资虚假" />薪资虚假 </label>
          <label class="radio"> <checkbox value="地址虚假" />地址虚假 </label>
          <label class="radio"> <checkbox value="招聘者身份虚假" />招聘者身份虚假 </label>
          <label class="radio"> <checkbox value="违法/欺诈行为" />违法/欺诈行为 </label>
          <label class="radio"> <checkbox value="收取求职者费用" />收取求职者费用 </label>
          <label class="radio"> <checkbox value="公司不存在" />公司不存在 </label>
          <label class="radio"> <checkbox value="其他违规行为" />其他违规行为 </label>
        </checkbox-group>
      </view>
      <view class="leixin" v-else>
        <view class="name"><span style="color: red">*</span>请选择举报类型（必选,可多选）</view>
        <checkbox-group class="radioList" v-model="xuan" @change="changeType">
          <label class="radio"> <checkbox value="信息虚假" />信息虚假 </label>
          <label class="radio"> <checkbox value="电话不通" />电话不通 </label>
          <label class="radio"> <checkbox value="发布者身份虚假" />发布者身份虚假 </label>
          <label class="radio"> <checkbox value="违法/欺诈行为" />违法/欺诈行为 </label>
          <label class="radio"> <checkbox value="广告简历" />广告简历 </label>
          <label class="radio">
            <checkbox value="无意义简历(乱写,乱填)" />无意义简历(乱写,乱填)
          </label>
          <label class="radio"> <checkbox value="其他违规行为" />其他违规行为 </label>
        </checkbox-group>
      </view>
      <view class="shuoming">
        <view class="name"><span style="color: red">*</span>请填写举报说明</view>
        <view class="kuang">
          <textarea
            class="textarea"
            maxlength="300"
            auto-height
            v-model="reportContent"
            placeholder="请详细描述您的举报理由"
          />
          <p>{{ reportContent.length > 300 ? 300 : reportContent.length }}/300</p>
        </view>
      </view>
      <view class="imageTitle">
        <span style="color: red">*</span>请上传凭证（请提供截图，最多3张）
      </view>
      <view class="shangchuan">
        <view class="cu-form-group">
          <view class="grid col-4 grid-square flex-sub">
            <view
              class="bg-img"
              v-for="(item, index) in imgList"
              :key="index"
              @tap="ViewImage"
              :data-url="imgList[index]"
            >
              <image :src="imgUrl + item" mode="aspectFit" />
              <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                <text class="cuIcon-close"></text>
              </view>
            </view>
            <view class="solids" @tap="ChooseImage" v-if="imgList.length < 3">
              <text class="cuIcon-cameraadd"></text>
            </view>
          </view>
        </view>
      </view>

      <view class="tijiao">
        <checkbox class="round" @click="checked = !checked" :checked="checked"></checkbox>
        <view style="display: inline-block; width: 620rpx">
          <span>举报即默认同意</span>
          <span style="color: #64b6a8" @click="xieyi(3)">《用户协议》</span>
          <span style="color: #64b6a8" @click="xieyi(2)">《隐私协议》</span>
        </view>
        <view class="but" @click="submit">立即举报</view>
        <view class="disclaimer">
          {{ disclaimers }}
        </view>
      </view>
    </scroll-view>
    <view class="motaikuang1" v-show="show1" @click="show1 = false">
      <view class="text">
        <view class="textTitle">{{ text }}</view>
        <scroll-view class="scroll-view" :scroll-top="scrollTop" scroll-y @scroll="scrollTop2">
          <!-- <rich-text :nodes="data.content"></rich-text> -->
          <!-- #ifdef MP-WEIXIN -->
          <rich-text :nodes="data.content"></rich-text>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <mp-html :content="data.content"></mp-html>
          <!-- #endif -->
        </scroll-view>
      </view>
    </view>
    <uniBall></uniBall>
  </view>
</template>
<script>
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  import { mapGetters } from 'vuex'
  export default {
    data() {
      const pr = this.$menuBtnInfo.pr ? `padding-right: ${this.$menuBtnInfo.pr + 5}px` : '';
      return {
        paddingR: pr,
        xuan: '',
        imgList: [],
        reportContent: '',
        imgUrl: this.$imgSrc,
        id: '',
        bUserId: '',
        userInfo: uni.getStorageSync('Pduser'),
        checked: false,
        show1: false,
        text: '',
        content: '获取验证码',
        data: {},
        targetArr: [{}, {}, {}, {}],
        curTarget: 0,
        scrollTop: 0,
        oldScrollTop: 0,
        curTop: 300,
        disclaimers: '',
        index: 0,
      }
    },
    onLoad(options) {
      this.id = options.id
      this.bUserId = options.userId
      this.index = options.index
      this.Disclaimers()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
      let _this = this
      _this.$myRequest
        .get('/mob/user/getText', {
          type: 2,
        })
        .then((res) => {
          this.targetArr[2] = res.list[0]
        })
      _this.$myRequest
        .get('/mob/user/getText', {
          type: 3,
        })
        .then((res) => {
          this.targetArr[3] = res.list[0]
        })
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    mounted() {
      let that = this
      this.$nextTick(function () {
        uni
          .createSelectorQuery()
          .in(this)
          .select('.list')
          .boundingClientRect((result) => {
            if (result) {
              that.curTop = result.top
            }
          })
          .exec()
      })
    },
    methods: {
      bianji() {
        uni.navigateTo({
          url: '/pages_my/report',
        })
      },
      // 免责声明
      Disclaimers() {
        this.$myRequest
          .get('/api/mobile/public/getDisclaimersByDisclaimerLocation', {
            disclaimerLocation: '12',
          })
          .then((res) => {
            this.disclaimers = res.Disclaimers.disclaimerContent
          })
      },
      scrollTop2(e) {
        //记录scroll  位置
        this.oldScrollTop = e.detail.scrollTop
      },
      ViewImage(e) {
        uni.previewImage({
          urls: this.imgList,
          current: e.currentTarget.dataset.url,
        })
      },
      DelImg(e) {
        uni.showModal({
          title: '',
          content: '确定要删除该图片？',
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              this.imgList.splice(e.currentTarget.dataset.index, 1)
            }
          },
        })
      },
      submit() {
        if (!this.checked) {
          uni.showToast({
            title: '请同意协议',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (this.xuan == '') {
          uni.showToast({
            title: '请输选择举报类型',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (!this.reportContent || this.reportContent == '') {
          uni.showToast({
            title: '请输入文字',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (!this.imgList.length) {
          uni.showToast({
            title: '请上传举报凭证',
            icon: 'none',
            mask: true,
          })
          return
        }
        let data = {
          userId: this.userInfo.id,
          bUserId: this.bUserId,
          businessType: 4,
          reportCategory: this.index == 1 ? '4' : '5',
          houseId: this.id,
          reportType: this.xuan.join('|'),
          reportContent: this.reportContent,
          image: this.imgList.join('|'),
        }
        this.$myRequest.post('/mob/user/saveReport', data).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: '举报成功',
              icon: 'none',
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        })
      },
      changeType(e) {
        this.xuan = e.detail.value
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      ChooseImage() {
        let _this = this
        uni.chooseImage({
          count: 3 - _this.imgList.length,
          sizeType: ['copressed'],
          sourceType: ['camera', 'album'],
          success(res) {
            //因为有一张图片， 输出下标[0]， 直接输出地址
            console.log(res.tempFilePaths)
            var imgFiles = res.tempFilePaths
            const tempFiles = res.tempFiles
            let panduan = false
            tempFiles.forEach((i, j) => {
              let length = '',resType;
              // #ifdef H5
              length = i.name.length
              resType = i.name.substring(length - 1, length)
              // #endif
              // #ifndef H5
              length = i.path.length
              resType = i.path.substring(length - 1, length)
              // #endif
              if (resType != 'g' && resType != 'G') {
                panduan = true
              }
            })
            if (panduan) {
              uni.showToast({
                title: '不支持当前文件格式',
                icon: 'none',
              })
              return
            }
            if (_this.imgList.length + imgFiles.length > 9) {
              uni.showToast({
                title: '图片最多不能超过9张',
                duration: 2000,
                icon: 'none',
              })
              return
            }
            var uper
            imgFiles.forEach((el) => {
              uni.showToast({
                title: '正在上传请稍后',
                icon: 'none',
                duration: 2000,
              })
              uper = uni.uploadFile({
                // 需要上传的地址
                url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
                // filePath  需要上传的文件
                filePath: el,
                name: 'file',
                success(res1) {
                  // console.log(res1.data);
                  _this.imgList.push(JSON.parse(res1.data).data[0].url)
                },
              })
            })

            // onProgressUpdate 上传对象更新的方法
            uper.onProgressUpdate(function (res) {})
          },
          fail: (fail) => {
            if (this.$userActiveCancalAct.some(v => fail.errMsg.includes(v.failMsg))) {
              return false;
            }
            this.$SHOWMODAL_TO_SETTINGS();
          },
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      xieyi(type) {
        if (this.curTarget == type) {
          this.show1 = true
          return
        }
        this.curTarget = type
        let _this = this
        this.data = this.targetArr[type]

        //视图会发生重新渲染
        this.scrollTop = this.oldScrollTop
        //当视图渲染结束 重新设置为0
        this.$nextTick(() => {
          this.scrollTop = 0
          this.show1 = true
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  .box {
    width: 100%;
    background-color: #fff;
    padding-bottom: 40rpx;
  }

  .tips {
    font-size: 24rpx;
    font-weight: 400;
    color: #64b6a8;
    margin: 30rpx;
  }

  .imageTitle {
    font-size: 34rpx;
    font-weight: 600;
    margin-left: 40rpx;
    margin-top: 20rpx;
  }

  .heads {
    padding: 0 5%;
    box-sizing: border-box;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 88rpx;
    }
    .backs {
      width: 32rpx;
      height: 32rpx;
      bottom: 0 !important;
    }

    .toptitles {
      font-size: 18px;
      color: #fff;
      // width: 300rpx;
      text-align: center;
    }

    .remove {
      width: 123rpx;
      height: 48rpx;
      border-radius: 6rpx;
      border: 1px solid #ffffff;
      text-align: center;
      line-height: 48rpx;
      color: #fff;
    }
  }

  .motaikuang1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20;

    .text {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #fff;
      left: 0;
      padding-top: 60rpx;
      padding-bottom: 100rpx;
      border-radius: 50rpx 50rpx 0 0;

      .textTitle {
        font-size: 36rpx;
        line-height: 50rpx;
        text-align: center;
        margin-bottom: 50rpx;
      }

      .scroll-view {
        height: 700rpx;
        margin: 0 auto;
        width: 630rpx;
      }
    }
  }

  .tijiao {
    width: 100%;
    background-color: #fff;

    checkbox {
      vertical-align: top;
      margin-right: 6rpx;
      margin-left: 40rpx;
    }

    span {
      font-size: 26rpx;
    }

    .but {
      width: 670rpx;
      height: 80rpx;
      background: #64b6a8;
      border-radius: 50rpx;
      font-size: 34rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
      margin-top: 24rpx;
      margin-left: 40rpx;
    }

    .disclaimer {
      margin: 20rpx 40rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #989898;
    }
  }

  .shangchuan {
    margin-top: 24rpx;
    margin-left: 8rpx;
    padding-bottom: 64rpx;
  }

  .shuoming {
    .name {
      font-size: 34rpx;
      font-weight: 600;
      margin-top: 40rpx;
      margin-left: 40rpx;
    }

    .kuang {
      position: relative;
      width: 670rpx;
      min-height: 80rpx;
      margin-top: 40rpx;
      margin-left: 40rpx;

      border: 1px solid #c9c9c9;

      textarea {
        width: 620rpx;
        margin-left: 24rpx;
        margin-top: 14rpx;
        line-height: 50rpx;
        letter-spacing: 2rpx;
        padding-bottom: 50rpx;
      }

      p {
        position: absolute;
        bottom: 10rpx;
        right: 20rpx;
        color: #999999;
      }
    }
  }

  .leixin {
    .name {
      font-size: 34rpx;
      font-weight: 600;
      margin-left: 40rpx;
    }

    .radioList {
      margin-top: 40rpx;
      margin-left: 60rpx;
    }

    uni-checkbox-group uni-label {
      width: 100% !important;
    }

    .radio {
      font-size: 34rpx;
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;

      uni-checkbox {
        margin-right: 20rpx;
      }

      /deep/uni-checkbox .uni-checkbox-input {
        border-radius: 0 !important;
      }

      /deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
        border-radius: 0 !important;
      }

      /deep/uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
        border-color: #999;
      }
    }
  }

  .tou {
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    image {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }
  }
  .tou {
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;
  }

  .grid.col-4.grid-square > uni-view {
    width: 212rpx;
    height: 212rpx;
  }

  .grid.col-4.grid-square > uni-view:nth-child(3n) {
    margin-right: 0;
  }

  /deep/uni-radio .wx-radio-input,
  /deep/uni-radio .uni-radio-input {
    width: 46rpx;
    height: 46rpx;
  }

  /deep/.uni-radio-input-checked {
    background-color: #64b6a8 !important;
    border-color: #64b6a8 !important;
  }

  /deep/uni-checkbox .uni-checkbox-input {
    background-color: rgba(0, 0, 0, 0);
    border: 2rpx solid #999;
  }

  /deep/uni-checkbox .wx-checkbox-input,
  /deep/uni-checkbox .uni-checkbox-input {
    width: 28rpx;
    height: 28rpx;
  }

  /deep/.uni-checkbox-input-checked {
    background-color: #64b6a8 !important;
    border: 2rpx solid #64b6a8 !important;
  }

  /deep/.tijiao uni-checkbox::before {
    font-size: 24rpx;
    margin-top: -14rpx;
    right: 4rpx !important;
  }

  .textarea {
    min-height: 200rpx;
  }
  .fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
  }
</style>
